<!-- 题库的 新增/查看/编辑 表单 -->
<template>
  <px-dialog v-model="visible" v-loading="loading" :title="title" width="960px" @close="cancel">
    <px-form ref="tableFormRef" :model="formValue" :rules="formRules" label-position="right" label-width="80px">
      <px-row>
        <px-col :span="12">
          <px-form-item label="科室" prop="className">
            <px-select v-model="formValue.className" style="width: 100%" placeholder="请选择科室" :disabled="title === '查看'" clearable>
              <px-option v-for="item in classNameList" :key="item.value" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="题型" prop="questionType">
            <px-select v-model="formValue.questionType" style="width: 100%" placeholder="请选择题型" :disabled="title === '查看'" clearable>
              <px-option v-for="item in questionTypeList" :key="item.value" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
      </px-row>
      <px-row>
        <px-col :span="12">
          <px-form-item label="分类" prop="classification">
            <px-select v-model="formValue.classification" style="width: 100%" placeholder="请选择分类" :disabled="title === '查看'" clearable>
              <px-option v-for="item in classificationList" :key="item.id" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
      </px-row>
      <px-row>
        <px-col :span="24">
          <px-form-item label="题目" prop="question">
            <px-input
              v-model="formValue.question"
              style="width: 100%"
              type="textarea"
              placeholder="请输入题目内容"
              :disabled="title === '查看'"
              clearable
            />
          </px-form-item>
        </px-col>
      </px-row>
      <px-row>
        <px-col :span="24">
          <px-button type="primary" class="add-option-btn" @click="addOptions">新增</px-button>
          <px-form-item label="选项" prop="options">
            <px-table :data="optionsData" size="small" border class="common-table" style="margin-top: 35px">
              <px-table-column prop="option" label="选项" width="80" show-overflow-tooltip>
                <template #default="scope"> {{ formatIndex(scope.row.option) }} </template>
              </px-table-column>
              <px-table-column prop="content" label="内容" min-width="120" show-overflow-tooltip />
              <px-table-column prop="answer" label="正确答案" width="100" show-overflow-tooltip>
                <template #default="scope">
                  <px-radio-group v-model="correctAnswer" class="answer">
                    <px-radio :label="formatIndex(scope.row.option)" />
                  </px-radio-group>
                </template>
              </px-table-column>
              <px-table-column label="操作" width="50" fixed="right" align="center">
                <template #default="scope">
                  <px-tooltip content="删除" placement="top">
                    <px-button link icon="Delete" type="danger" @click="deleteOptions(scope.$index)" />
                  </px-tooltip>
                </template>
              </px-table-column>
            </px-table>
          </px-form-item>
        </px-col>
      </px-row>
      {{ correctAnswer }}
    </px-form>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancel">取消</px-button>
        <px-button type="primary" @click="confirm">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup>
import { queryCurrentClassList } from "@/api/common";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: "新增"
  },
  questionType: {
    type: String,
    default: "单选"
  }
});
const emits = defineEmits(["update:visible", "save"]);

const visible = computed({
  get: () => props.visible,
  set: value => emits("update:visible", value)
});

const tableFormRef = ref();
const loading = ref(false);

const state = reactive({
  formValue: {},
  classNameList: [],
  questionTypeList: [
    {
      name: "单选",
      value: "单选"
    },
    {
      name: "多选",
      value: "多选"
    }
  ],
  classificationList: [],
  optionsData: [],
  correctAnswer: ""
});
const { formValue, classNameList, questionTypeList, classificationList, optionsData, correctAnswer } = toRefs(state);

const formRules = reactive({
  className: [{ required: true, message: "科室不能为空", trigger: "change" }],
  questionType: [{ required: true, message: "题型不能为空", trigger: "change" }],
  classification: [{ required: true, message: "分类不能为空", trigger: "change" }],
  question: [{ required: true, message: "题目不能为空", trigger: "blur" }],
  options: [{ required: true, message: "选项不能为空", trigger: "blur" }]
});

onMounted(() => {
  getClassNameSelect();
});

const formatIndex = option => {
  const optionIndex = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
  return optionIndex[option];
};

// 获取科室下拉框数据
const getClassNameSelect = async () => {
  const classNameData = await queryCurrentClassList();
  state.classNameList = [...classNameData];
};

// 新增选项
const addOptions = () => {
  let i = state.optionsData.length > 0 ? state.optionsData.length : 0;
  state.optionsData.push({
    option: i,
    content: "",
    answer: 1
  });
};

// 移除选项
const deleteOptions = index => {
  console.log("row", index);
  state.optionsData.splice(index, 1);
  // 更新选项，比如删除B之后，C自动变为B，D变为C
  state.optionsData.forEach((item, index) => {
    item.option = index;
  });
  state.correctAnswer = "";
};

// 取消
const cancel = () => {
  tableFormRef.value?.resetFields();
  emits("update:visible", false);
};

// 确定
const confirm = () => {
  const data = state.dataListForm.dataList;
  tableFormRef.value?.validate(validate => {
    if (validate) {
      emits("save", data);
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");

.add-option-btn {
  position: absolute;
  left: 80px;
  z-index: 9999;
}

.answer {
  :deep(.px-radio .px-radio__label) {
    display: none;
  }
}
</style>
